<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/reset.css">

    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/index.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <main>
            <h1><img src="../images/index/logo.png" alt=""></h1>
            <nav>
                <a class="active" href="index.html">首页</a>
                <a href="about.html">关于我们</a>
                <a href="product.html">产品介绍</a>
                <a href="team.html">我们团队</a>
                <a href="contact.html"> 联系我们</a>
            </nav>
        </main>
    </header>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="picture">
            <img class="active" src="../images/index/banner1.png" alt="">
            <img src="../images/index/banner2.png" alt="">
            <img src="../images/index/banner3.png" alt="">
            <img src="../images/index/banner4.png" alt="">
        </div>
        <!-- <img src="../images/index/banner1.png" alt=""> -->
        <button>></button>
        <button><</button>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
       
    </div>
    <!-- 关于我们 -->
    <div class="about">
        <main>
            <!-- 头部部分 -->
            <h2>关于我们</h2>
            <h3>About us</h3>
            <h4>
                <img src="../images/index/coffee logo.png" alt="">
            </h4>
            <!-- 图片和文字 -->
            <div class="big">
                <!-- 左边的小框 -->
                <div class="small">
                    <img src="../images/index/pic1.png" alt="">
                </div>
                <!-- 右边的文字 -->
                <div class="text">
                    <div class="title">
                        公司简介
                    </div>
                    <div class="content">
                        <p> 二十世纪三十年代，巴西咖啡豆生产过剩， 剩余的咖啡豆只能当燃料消耗，非常可惜。 当巴
                            西政府向雀巢公司寻求咖啡豆过剩的解决方法的时候 ， 并没有意识到这最终成就了一个历久弥醇
                            的伟大的咖啡品牌。 1930年，巴西咖啡连续经历了几次大丰收，短期内难以完全销售，便向雀巢
                            求助， 求令咖啡不失香醇的长 期保存方式。 咖啡权威——马克思•莫根特尔(Max Morgenthal
                            er)立刻同他的研究 队伍着手研究，试图制造一种既可以较好保存咖啡芳香又易溶于热水的"固体咖
                            啡"。经过在雀巢瑞士实验室长达七年的不懈努力，30年代末，雀巢向市场推出速溶咖啡，“雀巢
                            咖啡”品牌创立。</p>
                        <p>1988年，雀巢通过考察确定云南适宜种植咖啡，决定支持云南省的咖啡种植。随后于1992年
                            在云南思茅地区成立咖啡农艺服务部，帮助当地发展咖啡种植业。 1997年， 雀巢公司在西双版纳
                            创建试验示范农场，从零开始，让农民得到方方面面的实际培训，大大促进了当地小粒种咖啡豆的
                            发展，并使一个产量低、质量次的咖啡豆产地发展成一个产量高、质量优且已引起全球咖啡界关注
                            的咖啡豆产地。雀巢不仅让农民通过种植咖啡获得了稳定的收入,当地农民通过向雀巢了解国际现货
                            市场价格甚至自己上网查询交易网站的价格，学会根据波动分析销售咖啡的时机。</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!-- 浓香咖啡 ,美好午后-->
    <div class="afternoon">
        浓香咖啡 让你享受每一个美好的午后时光
    </div>
    <!-- 产品介绍 -->
    <div class="product">
        <main>
            <!-- 头部部分 -->
            <h2>产品介绍</h2>
            <h3>Product</h3>
            <h4>
                <img src="../images/index/coffee logo.png" alt="">
            </h4>
            <!-- 介绍详情图片和文字 -->
            <div class="details">
                <dl class="coffee">
                    <dt>
                        <div class="modal_box"><i class="iconfont">&#xe623;</i> </div>
                        <img src="../images/index/latte.png" alt="">
                    </dt>
                    <dd>拿铁咖啡</dd>
                    <p>拿铁咖啡是意大利浓缩咖啡(Espresso)与牛奶的经典
                        混合，意大利人也很喜欢把拿铁作为早餐的饮料，带
                        来让人难以忘怀的味道</p>

                </dl>
                <dl  class="coffee">
                    <dt>
                        <div class="modal_box"><i class="iconfont">&#xe623;</i> </div>
                       <a href="../html/product.html" target="_blank"> <img src="../images/index/cappuccino.png" alt="" > </a>
                      
                    </dt>
                    <dd>卡布基诺</dd>
                    <p>卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸
                        汽泡沫牛奶相混合的意大利咖啡。象卡布奇诺教会
                        的修士头巾一样，咖啡因此得名</p>

                </dl>
                <dl  class="coffee">
                    <dt>
                        <div class="modal_box"><i class="iconfont">&#xe623;</i> </div>
                        <img src="../images/index/mocha.png" alt="">
                    </dt>
                    <dd>摩卡咖啡</dd>
                    <p>摩卡咖啡(CafeMocha)是一种最古老的咖啡，其历
                        史要追溯到咖啡的起源。它是浓缩咖啡、鲜奶油和
                        牛奶混合而成，摩卡得名于有名的摩卡港</p>

                </dl>
            </div>
        </main>
    </div>
    <!-- 公司团队 -->
    <div class="team">
        <main>
            <!-- 头部部分 -->
            <h2>公司团队</h2>
            <h3>Our team</h3>
            <h4>
                <img src="../images/index/coffee logo.png" alt="">
            </h4>
            <!-- 团队内容部分 -->
            <div class="content">
                <dl>
                    <dt>
                        <img src="../images/index/justin.png" alt="">
                    </dt>
                    <dd>
                        <p>贾斯汀·比伯</p>
                        <p>justin biber</p>
                    </dd>
                    <dd>
                        <p>贾斯汀·比伯</p>
                        <p>贾斯汀出生于1994年3月1日的加
                            拿大安大略省伦敦的圣若啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                    </dd>


                </dl>
                <dl>
                    <dt>
                        <img src="../images/index/charlie.png" alt="">
                    </dt>
                    <dd>
                        <p>查理·普斯</p>
                        <p>Charlie Puth</p>
                    </dd>
                    <dd>
                        <p>查理·普斯</p>
                        <p>查理出生于1993年5月1日的加
                            拿大安大略省伦敦的圣若哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
                    </dd>


                </dl>
                <dl>
                    <dt>
                        <img src="../images/index/Avril.png" alt="">
                    </dt>
                    <dd>
                        <p>艾薇儿·拉维尼</p>
                        <p>Avril Lavigne</p>
                    </dd>
                    <dd>
                        <p>艾薇儿·拉维尼</p>
                        <p>艾薇儿出生于1994年3月1日的加
                            拿大安大略省伦敦的圣若好速度速度速度速度就，世博倒计时倒计时的是的</p>
                    </dd>


                </dl>
                <dl>
                    <dt>
                        <img src="../images/index/taylor.png" alt="">
                    </dt>
                    <dd>
                        <p>泰勒·斯威夫特</p>
                        <p>Taylor Swift</p>
                    </dd>
                    <dd>
                        <p>泰勒·斯威夫特</p>
                        <p>泰勒出生于1994年3月1日的加
                            拿大安大略省伦敦的圣若时间合适就动手动脚打卡时间大概多少事情</p>
                    </dd>

                </dl>
            </div>
        </main>
    </div>
    <!-- 联系我们 -->
    <div class="contact">
        <main>
            <!-- 头部部分 -->
            <h2>联系我们</h2>
            <h3>Contact us</h3>
            <h4>
                <img src="../images/index/coffee logo.png" alt="">
            </h4>
            <div class="big">
                <div class="map">
                    <!DOCTYPE html
                        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
                        <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
                        <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
                        <title>百度地图API自定义地图</title>
                        <!--引用百度地图API-->
                        <style type="text/css">
                            html,
                            body {
                                margin: 0;
                                padding: 0;
                            }

                            .iw_poi_title {
                                color: #CC5522;
                                font-size: 14px;
                                font-weight: bold;
                                overflow: hidden;
                                padding-right: 13px;
                                white-space: nowrap
                            }

                            .iw_poi_content {
                                font: 12px arial, sans-serif;
                                overflow: visible;
                                padding-top: 4px;
                                white-space: -moz-pre-wrap;
                                word-wrap: break-word
                            }
                        </style>
                        <script type="text/javascript"
                            src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
                    </head>

                    <body>
                        <!--百度地图容器-->
                        <div style="width:664px;height:344px;border:#ccc solid 1px;" id="dituContent"></div>
                    </body>
                    <script type="text/javascript">
                        //创建和初始化地图函数：
                        function initMap() {
                            createMap();//创建地图
                            setMapEvent();//设置地图事件
                            addMapControl();//向地图添加控件
                            addMarker();//向地图中添加marker
                        }

                        //创建地图函数：
                        function createMap() {
                            var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
                            var point = new BMap.Point(106.518723, 29.544306);//定义一个中心点坐标
                            map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
                            window.map = map;//将map变量存储在全局
                        }

                        //地图事件设置函数：
                        function setMapEvent() {
                            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                            map.enableKeyboard();//启用键盘上下左右键移动地图
                        }

                        //地图控件添加函数：
                        function addMapControl() {
                            //向地图中添加缩放控件
                            var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
                            map.addControl(ctrl_nav);
                            //向地图中添加缩略图控件
                            var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
                            map.addControl(ctrl_ove);
                            //向地图中添加比例尺控件
                            var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
                            map.addControl(ctrl_sca);
                        }

                        //标注点数组
                        var markerArr = [{ title: "DuZu咖啡", content: "重庆大坪龙湖时代天街3号写字楼2407室我的备注", point: "106.518741|29.543552", isOpen: 0, icon: { w: 23, h: 25, l: 0, t: 21, x: 9, lb: 12 } }
                        ];
                        //创建marker
                        function addMarker() {
                            for (var i = 0; i < markerArr.length; i++) {
                                var json = markerArr[i];
                                var p0 = json.point.split("|")[0];
                                var p1 = json.point.split("|")[1];
                                var point = new BMap.Point(p0, p1);
                                var iconImg = createIcon(json.icon);
                                var marker = new BMap.Marker(point, { icon: iconImg });
                                var iw = createInfoWindow(i);
                                var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
                                marker.setLabel(label);
                                map.addOverlay(marker);
                                label.setStyle({
                                    borderColor: "#808080",
                                    color: "#333",
                                    cursor: "pointer"
                                });

                                (function () {
                                    var index = i;
                                    var _iw = createInfoWindow(i);
                                    var _marker = marker;
                                    _marker.addEventListener("click", function () {
                                        this.openInfoWindow(_iw);
                                    });
                                    _iw.addEventListener("open", function () {
                                        _marker.getLabel().hide();
                                    })
                                    _iw.addEventListener("close", function () {
                                        _marker.getLabel().show();
                                    })
                                    label.addEventListener("click", function () {
                                        _marker.openInfoWindow(_iw);
                                    })
                                    if (!!json.isOpen) {
                                        label.hide();
                                        _marker.openInfoWindow(_iw);
                                    }
                                })()
                            }
                        }
                        //创建InfoWindow
                        function createInfoWindow(i) {
                            var json = markerArr[i];
                            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
                            return iw;
                        }
                        //创建一个Icon
                        function createIcon(json) {
                            var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
                            return icon;
                        }

                        initMap();//创建和初始化地图
                    </script>

                    </html>
                </div>
                <div class="method">
                    <div class="mini">
                        <i class="iconfont">&#xe632;</i>
                        <p>咨询热线</p>
                        <p>Information Hotline</p>
                        <p>重庆：+86 023-867-7848</p>
                        <p>(09：30~18：30 北京时间</p>
                    </div>
                    <div class="mini">
                        <i class="iconfont">&#xe629;</i>
                        <p>公司地址</p>
                        <p>Company address</p>
                        <p>地址：重庆大坪龙湖时代天街3号写字楼2407室</p>
                        <p>(09：30~18：30 北京时间）</p>
                    </div>
                    <div class="mini">
                        <i class="iconfont">&#xe600;</i>
                        <p>公司邮箱</p>
                        <p>E-mail</p>
                        <p>邮箱：info@haitouglobal.com</p>
                        <p>(09：30~18：30 北京时间）</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!-- 底部 -->
    <footer>
        <main>
            <p>Copyright © 重庆duzu有限公司 | duzu备案号 33010602001878 号 版权所有：重庆戈登有限公司</p>
            <h5><img src="../images/index/logo2.png" alt=""></h5>
        </main>
    </footer>
    <script src="../js/index.js"></script>
</body>

</html>